<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用accordion插件实现页面中多区域的折叠操作</title>
<script type="text/javascript" src="lib/jquery-2.1.1.js"></script>
<script type="text/javascript" src="lib/jquery-ui.js"></script>
<style type="text/css">
	body{font-size:13px}
	.divFrame{width:500px;}
	.divFrame h3{padding:5px;font-size:12px;border:solid 1px #ccc;background-color:#eee}
	.divFrame .divOpt{padding:5px;border:solid 1px #eee}
</style>
<script type="text/javascript">
	$(function(){
		$("#accordion").accordion();
	})
</script>
</head>
<body>

	<div class="divFrame">
		<div id="accordion">
			<h3><a href="#">Section 1</a></h3>
			<div class="divOpt">
				<p>Item 1</p>
			</div>
			<h3><a href="#">Section 2</a></h3>
			<div class="divOpt">
				<p>Item 2</p>
			</div>
			<h3><a href="#">Section 3</a></h3>
			<div class="divOpt">
				<p>Item 3</p>
			</div>
			<h3><a href="#">Section 4</a></h3>
			<div class="divOpt">
				<p>Item 4</p>
			</div>
		</div>
		
	</div>
	
</body>
</html>